<template>
	<view class="mainpadding2">
		<view class="mainpadding_top ffffff radius">
			<view class="titletext bold hei_text">類別</view>
			<view class="margin_top">
				<u-radio-group v-model="type" placement="row" circle @change="getimg()">
					<u-radio activeColor="#ff8505" :customStyle="{marginRight: '15rpx'}" label="轉帳" name="1"></u-radio>
					<u-radio activeColor="#ff8505" :customStyle="{marginRight: '15rpx'}" label="行動支付"
						name="2"></u-radio>
					<u-radio activeColor="#ff8505" :customStyle="{marginRight: '15rpx'}" label="信用卡" name="3"></u-radio>
					<u-radio activeColor="#ff8505" label="超商繳費" name="4"></u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween" v-if="type!=2">
			<view class="titletext bold hei_text">名稱</view>
			<input class="main_size bold hei_text" type="text" placeholder="請輸入" style="text-align: right;"
				v-model="name">
		</view>
		<view class="" v-show="type==1">
			<view class="mainpadding_top ffffff radius flexbetween">
				<view class="titletext bold hei_text">銀行代號</view>
				<input class="main_size bold hei_text" type="text" placeholder="請輸入" style="text-align: right;"
					v-model="yhdh">
			</view>
			<view class="mainpadding_top ffffff radius flexbetween">
				<view class="titletext bold hei_text">帳號</view>
				<input class="main_size bold hei_text" type="text" placeholder="請輸入" style="text-align: right;"
					v-model="zh">
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="flexleft" style="width: 90%;">
				<view class="titletext bold hei_text margin-right">鏈接</view>
				<input class="main_size bold hei_text" type="text" placeholder="請輸入" style="width: 80%;"
					v-model="lj">
			</view>
			<view class="" @click="getCodelj()">
				<u-icon name="scan" color="#ffb800" size="28"></u-icon>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius">
			<view class="titletext bold hei_text">背景圖片</view>
			<view class="flexleft flex_wrap">
				<view class="itemimgBox flexcenter margin_top2" v-for="(item,index) in image_arr" :key="index" @click="checkimg=item">
					<!-- 已上传 -->
					<view class="listleftimg radius">
						<image class="radius" :src="item" mode=""></image>
						<view class="checkimg" v-if="checkimg==item">
							<u-icon name="checkbox-mark" color="#fff" size="8"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submitbtn margin_top" @click="submit()">確認</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "1",
				name: "",
				yhdh: "",
				zh: "",
				lj: "",
				image: [],
				image_arr: [],
				listid:"",
				checkimg:"",
				issubmit:false
			}
		},
		onLoad(options) {
			uni.$on("codelj",data=>{
				this.lj = data
			})
			if(options.id){
				this.listid = options.id
				this.getdetail()
			}
			this.getimg()
		},
		onUnload() {
			uni.$off("codelj")
		},
		methods: {
			getCodelj(){
				uni.navigateTo({
					url:"/pages/workbench/getcodelj"
				})
			},
			getimg(){
				let url = '/api/index/bankimageIndex'
				this.http.request(url, 'POST', {
					type:this.type
				}, false, false, true).then(res => {
					let arr = []
					res.data.forEach(item=>{
						arr.push(item.image_text)
					})
					this.image_arr = arr
				})
			},
			getdetail(){
				let url = '/api/shop/deailpaytype'
				this.http.request(url, 'POST', {
					id:this.listid
				}, false, false, true).then(res => {
					let data = res.data
					this.type = data.type.toString()
					this.name = data.name
					this.yhdh = data.yhdh
					this.zh = data.zh
					this.lj = data.lj
					this.checkimg = data.image
				})
			},
			deleimage(i, upimg, arr) { //刪除图片
				upimg.splice(i, 1)
				arr.splice(i, 1)
			},
			submit() { //提現記錄
				if (this.name == "" && this.type!=2) {
					this.http.toast("請輸入名稱")
					return false
				}
				if(this.type==1){
					if (this.yhdh == "") {
						this.http.toast("請輸入銀行代號")
						return false
					}
					if (this.zh == "") {
						this.http.toast("請輸入帳號")
						return false
					}
				}
				
				if (this.lj == "") {
					this.http.toast("請輸入鏈接")
					return false
				}

				// if (this.image.length==0) {
				// 	this.http.toast("請上傳背景圖片")
				// 	return false
				// }
				if(this.issubmit) return
				this.issubmit = true
				uni.showLoading({
					mask:true,
					title:"請稍後"
				})
				let _this = this;
				let data = {
					shop_id: uni.getStorageSync("shop_id"),
					type: this.type,
					name: this.name,
					yhdh: this.yhdh,
					zh: this.zh,
					lj: this.lj,
					image: this.checkimg,
				}
				let url = '/api/shop/addpaytype'
				if(this.listid){
					this.$set(data,"id",this.listid)
					url = '/api/shop/editpaytype'
				}
				this.http.request(url, 'POST', data, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						if (this.listid) {
							this.http.toast("編輯成功")
						}else{
							this.http.toast("添加成功")
						}
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					} else {
						this.issubmit = false
						this.http.toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style>
.checkimg {
	padding: 6rpx 10rpx;
	border-radius: 0 10rpx;
	background-color: #ff0000;
	color: #fff;
	font-size: 16rpx;
	position: absolute;
	right: 0;
	top: 0;
}
</style>